/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-01-14 16:48:51
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-02-12 15:19:17
 * @FilePath: \my-book-react\src\pages\home\compoments\popular\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import style from './index.module.scss';
// import { Tabs } from 'antd-mobile';
import { Space, Card, Grid, Tabs } from '@/bases';
import BookCover from '@/components/bookCover';
import { useRequest } from '@/hooks/useRequest';
import api from '@/pages/home/api';
import { IHomeData, IRanking } from '@/pages/home/types';
import { px2rem } from '@/utils/unit';
const Popular: React.FC = React.memo(() => {
  const navigate = useNavigate();
  const { data } = useRequest<IHomeData>({ url: api.getHomeData });
  // console.log(data);
  const renderList = (rank: IRanking) => {
    return rank.books.map((book) => (
      <React.Fragment key={book.bookId}>
        <Grid.Item onClick={() => navigate(`/book/${book.bookId}`)}>
          <Space gap={px2rem(12)}>
            <BookCover src={book.coverImg} alt={book.title} style={{ '--width': px2rem(47), '--height': px2rem(66) }} />
            <div className={style.bookInfo}>
              <div className={style.bookName}>{book.title}</div>
              <div className={style.author}>{book.author}</div>
            </div>
          </Space>
        </Grid.Item>
      </React.Fragment>
    ));
  };

  const onHeaderClick = () => {
    navigate('/ranking');
  };
  const renderTab = () => {
    return data?.ranking.map((rank, index) => (
      <Tabs.Tab title={rank.title} key={`${index + 1}`}>
        <Grid columns={2} gap={[0, px2rem(16)]}>
          {renderList(rank)}
        </Grid>
      </Tabs.Tab>
    ));
  };
  return (
    <div className={style.ranking}>
      <Card
        title="排行榜"
        extra="更多"
        onHeaderClick={onHeaderClick}
        headerClassName={style.header}
        titleClassName={style.title}
      >
        <Tabs activeKey="1" showTabLine={true} tabActiveClassName={style.tabActive} tabListClassName={style.tabList}>
          {renderTab()}
        </Tabs>
        {/* <Grid columns={2} gap={px2rem(24)}>
          {renderContent()}
        </Grid> */}
      </Card>
    </div>
  );
});
export default Popular;
